<template>

    <div class="navIcon">

        <div class="navIcon-item" v-for="(item,index) in navIcon" :key="index">
        <div >
            <img :src="item.imgUrl" alt="">
            <p >{{item.title}}</p>
        </div>
        </div>

    </div>
    
</template>

<style>

.navIcon{
  /* 距离顶部定位元素的距离 */
  margin-top: 180px; 
  background-color: #FFF;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  font-size: 28px;
}

.navIcon-item{
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.navIcon-item img{
  width: 70px;
  height: 70px;
}

</style>

<script>
export default {

    data() {    
        return {
            navIcon: [
                {title: '企采场景购',imgUrl: 'http://127.0.0.1:3000/company.png'},
                {title: '飞猪旅行',imgUrl: 'http://127.0.0.1:3000/fliggy.png'},
                {title: '充值中心',imgUrl: 'http://127.0.0.1:3000/recharge.png'},
                {title: '会员',imgUrl: 'http://127.0.0.1:3000/vip.png'}
            ]
        }  
    }, 
    
}
</script>